<template>
  <!-- 工单详情 -->
  <a-modal
    v-model:open="visible"
    title="详情"
    @ok="handleOk"
    class="addStation"
    destroyOnClose
    :width="1000"
    @cancel="cancel"
    centered
  >
    <div class="details">
      <div class="content">
        <div class="title">基础信息</div>
        <div class="detailsInfo">
          <div class="infoItem">
            <div class="itemLabel">电站名称：</div>
            <div class="itemName">{{ infoData.stationName }}</div>
          </div>
          <div class="infoItem">
            <div class="itemLabel">项目名称：</div>
            <div class="itemName">{{ infoData.companyName }}</div>
          </div>
          <div class="infoItem">
            <div class="itemLabel">地点：</div>
            <div class="itemName">{{ rowData?.location }}</div>
          </div>
          <div class="infoItem">
            <div class="itemLabel">工单编号：</div>
            <div class="itemName">{{ infoData.serialCode }}</div>
          </div>
          <div class="infoItem">
            <div class="itemLabel">工单状态：</div>
            <div class="itemName">{{ infoData.stateStr }}</div>
          </div>
          <div class="infoItem">
            <div class="itemLabel">关联工作票个数：</div>
            <div class="itemName">{{ infoData.workTicketDtoList?.length }}</div>
          </div>
          <div class="infoItem">
            <div class="itemLabel">巡检日期：</div>
            <div class="itemName">{{ infoData.inspectionDate }}</div>
          </div>
          <div class="infoItem">
            <div class="itemLabel">巡检人：</div>
            <div class="itemName">{{ infoData.inspectionUserName }}</div>
          </div>
          <div class="infoItem">
            <div class="itemLabel">工单附件：</div>
            <div class="itemName">
              <div
                v-if="infoData.attachFileIds"
                @click="dowload(infoData.attachFileIds)"
                class="downloadBtn"
              >
                {{infoData.attachFileIds.split(',').length}}
              </div>
              <span v-else>--</span>
            </div>
          </div>
        </div>
      </div>
      <div class="content" v-if="infoData?.inspectionQuestionList?.length">
        <div class="title">异常问题记录</div>
        <a-table
          :dataSource="infoData?.inspectionQuestionList"
          :columns="errColumns"
          size="small"
          :scroll="tableScroll"
          @resizeColumn="handleResizeColumn"
          pagination
          class="table"
          :loading="loading"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'attach'">
              <div
                v-if="record?.attach"
                @click="dowload(record?.attach)"
                class="downloadBtn"
              >
                1
              </div>
            </template>
          </template>
        </a-table>
      </div>
      <div class="content">
        <div class="title">操作记录</div>
        <a-table
          :dataSource="infoData?.workDealLogDtoList"
          :columns="logColumns"
          size="small"
          :scroll="tableScroll"
          @resizeColumn="handleResizeColumn"
          pagination
          class="table"
          :loading="loading"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'workOrderState'">
              {{ WORK_ORDER_STATUS[record.workOrderState] }}
            </template>
            <template v-if="column.key === 'type'">
              {{ HANDLE_NODE_TYPE[record.type] }}
            </template>
            <template v-if="column.key === 'attach'">
              <div
                v-if="record?.attach"
                @click="dowload(record?.attach)"
                class="downloadBtn"
              >
                1
              </div>
            </template>
          </template>
        </a-table>
      </div>
    </div>
    <template #footer>
      <div class="footerBar">
        <a-button key="back" @click="cancel">关闭</a-button>
      </div>
    </template>
  </a-modal>
</template>
<script setup>


import { WORK_ORDER_STATUS, HANDLE_NODE_TYPE } from "@/constants/workOrder";
const $api = inject("$api");
const props = defineProps({
  detailVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
  workOrderType: {
    type: String,
  },
});
const loading = ref(false);
const visible = ref(props.detailVisible);
const emits = defineEmits(["update:detailVisible", "getOrderList"]);
const errColumns = ref([
  {
    title: "提出人",
    dataIndex: "createUserName",
    key: "createUserName",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "问题描述",
    dataIndex: "dealDesc",
    key: "dealDesc",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "问题提出时间",
    dataIndex: "createTime",
    key: "createTime",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "附件",
    dataIndex: "attach",
    key: "attach",
    //width: 120,
    align: "center",
    fixed: "right",
  },
]);
const logColumns = ref([
  {
    title: "操作人",
    dataIndex: "createUserName",
    key: "createUserName",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "操作节点",
    dataIndex: "type",
    key: "type",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "处理描述",
    dataIndex: "dealDesc",
    key: "dealDesc",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "节点工单状态",
    dataIndex: "workOrderState",
    key: "workOrderState",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "操作时间",
    dataIndex: "createTime",
    key: "createTime",
    width: 210,
    resizable: true,
    align: "center",
  },
  {
    title: "附件",
    dataIndex: "attach",
    key: "attach",
    width: 120,
    align: "center",
    fixed: "right",
  },
]);
watch(
  () => props.detailVisible,
  (val) => {
    visible.value = val;
    if (val) {
      getWorkOrderDetail();
    }
  }
);
const labelCol = { style: { width: "100px" } };
const infoData = ref({});
const getWorkOrderDetail = async () => {
  loading.value = true;
  const res = await $api.workOrderDetail(props.rowData.id);
  loading.value = false;
  if (res && res.code === 0 && res.data) {
    infoData.value = res.data;
  }
};
const cancel = () => {
  emits("update:detailVisible", false);
  infoData.value = {};
};
const dowload = async (id) => {
  const urlRes = await $api.fileFindByIds(id);
  if(urlRes?.data.length){
    window.open(urlRes?.data[0]?.url);
  }
};
</script>

<style lang="less" scoped>
.footerBar {
  text-align: center;
  margin-top: 30px;
}
.details {
  .title {
    font-size: 15px;
    margin: 30px 0 0 0;
  }
  .detailsInfo {
    // padding: 0 20px;
  }
  .infoItem {
    width: 33.33%;
    display: inline-block;
    margin-top: 20px;
  }
  .itemLabel,
  .itemName {
    display: inline-block;
  }
  .itemLabel {
    width: 120px;
    text-align: right;
  }
  .itemName {
    width: 195px;
    vertical-align: top;
  }
}
.table {
  margin-top: 20px;
}
.downloadBtn {
  padding: 0 5px;
  color: #1655ad;
  cursor: pointer;
}
</style>
